<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>
    <link th:href="@{/ruoyi/css/ry-ui.css}" rel="stylesheet"/>
    <link th:href="@{/css/my.css}" rel="stylesheet"/>
    <!-- layui -->
    <!--页面样式文件-->
    <link rel="stylesheet" th:href="@{/dist/css/main.css}">
    <link rel="stylesheet" th:href="@{/dist/css/media.css}">
    <style>
        .filter-btn {
            margin-right: 32px;
        }

        .filter-btn .btn {
            background-color: #fff;
            border: 1px solid #f0f0f8;
            color: #333;
        }

        .filter-btn .active {
            background-color: #45d09b !important;
            border-color: #45d09b !important;
            color: #ffffff;
        }
    </style>
</head>

<body class="gray-bg">
<!--右侧主体-->

<div class="Internal">
    <!--搜索区域-->
    <div class="row rowNew">
        <div class="col-sm-12 search-area">
            <form id="formId">
                <div class="select-list">
                    <ul class="ulForm clearfix">
                        <li class="select-time">
                            <label>选择时间： </label>
                            <div class="fl inputTime-outer">
                                <input type="text" th:value="${startTime}" class="time-input" id="startTime"
                                       placeholder="开始时间" name="params[beginPlanTime]"/>
                                <div class="icon-rili"></div>
                            </div>
                            <span>--</span>
                            <div class="fl inputTime-outer">
                                <input type="text" th:value="${endTime}" class="time-input" id="endTime"
                                       placeholder="结束时间" name="params[endPlanTime]"/>
                                <div class="icon-rili"></div>
                            </div>
                            <div class="btn-outer fl search">
                                <a class="btn btn-primary" style="margin-left: 24px;">搜索</a>
                            </div>
                        </li>
                        <li class="btn-group">
                            <a class="btn btn-primary mlr_8 thisYear">本年</a>
                            <a class="btn btn-primary mlr_8 thisMonth ">本月</a>
                            <a class="btn btn-primary mlr_8 thisDay">本日</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
    </div>

    <div class="btm">
        <div class="btm-top">
            <ul id="tabList" class="tabList clearfix">
                <li th:id="${li.type}" th:each="li,0:${list}" th:class="${li.class}" th:text="${li.val}"></li>
            </ul>
        </div>
        <div class="btm-content">
            <div class="tab-content active">

                <!--统计区域-->
                <div class="row rowNew">
                    <div class="statistics-area">
                        <div class="statistics-list clearfix">
                            <div class="statistics-item1 col-xs-6 col-sm-4 col-lg-4">
                                <div id="cf" class="main  active">
                                    <div class="indro color01" style="font-weight: bold;" th:text="${cf.name}"><img
                                            src="./dist/img/intertal-01.jpg" alt=""> 蔬菜总产量
                                    </div>
                                    <div class="num color01">
                                        <span th:text="${cf.amount}"></span>
                                        <span class="unit">kg</span>
                                    </div>
                                    <div class="chan">日均：<span th:text="${cf.dayAmount}">38</span>KG</div>
                                </div>
                            </div>
                            <div class="statistics-item1 col-xs-6 col-sm-4 col-lg-4">
                                <div id="milk" class="main ">
                                    <div class="indro color02" th:text="${milk.name}"><img
                                            src="./dist/img/intertal-02.jpg" alt="">牛奶总产量
                                    </div>
                                    <div class="num color02">
                                        <span th:text="${milk.amount}"></span>
                                        <span class="unit">kg</span>
                                    </div>
                                    <div class="chan">日均：<span th:text="${milk.dayAmount}">38</span>KG</div>
                                </div>
                            </div>
                            <div class="statistics-item1 col-xs-6 col-sm-4 col-lg-4">
                                <div id="chk" class="main ">
                                    <div class="indro color03" th:text="${chk.name}"><img
                                            src="./dist/img/intertal-03.jpg" alt="">鸡肉总产量
                                    </div>
                                    <div class="num color03">
                                        <span th:text="${chk.amount}"></span>
                                        <span class="unit">kg</span>
                                    </div>
                                    <div class="chan">日均：<span th:text="${chk.dayAmount}">38</span>KG</div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

                <!--图表区域-->
                <div class="row">
                    <div class="row rowNew">
                        <div class="filter-btn fl-r">
                            <a class="btn" id="yearBtn">年</a>
                            <a class="btn active" id="monthBtn">月</a>
                            <a class="btn" id="dayBtn">日</a>
                        </div>
                        <div class="echart-item col-sm-12">
                            <div id="main" style="width:100%;height:410px;"></div>
                        </div>
                    </div>
                    <div class="row rowNew">
                        <div class="echart-item col-sm-12">
                            <div id="main1" style="width:100%;height:410px;"></div>
                        </div>
                    </div>
                    <div class="row rowNew">
                        <div class="echart-item col-sm-12">
                            <div id="main2" style="width:100%;height:410px;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-content">

            </div>
            <div class="tab-content">

            </div>
            <div class="tab-content">

            </div>
            <div class="tab-content">

            </div>
            <div class="tab-content">

            </div>
        </div>
    </div>
</div>


<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>

<!--echart-->
<script th:src="@{/dist/libs/echarts/dist/echarts.min.js}"></script>

<!-- 遮罩层 -->
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
<script th:src="@{/ruoyi/js/common.js?v=3.4.0}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=3.4.0}"></script>
<script th:src="@{/ruoyi/js/my-common-js.js}"></script>

<script th:inline="javascript">
    var ctx = [[@{
        /}]];
        var currentSort = '共计总量'
    var timeSort = 2;//月份
        var outputType = $(".active").attr("id");
    $('.filter-btn .btn').click(function () {
        timeSort = $(this).index() + 1;
        $(this).addClass('active').siblings().removeClass('active')
    })
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        var timestamp = new Date().getTime();
        var timestamp1 = new Date().getTime() + 1000 * 60 * 60 * 24 * 2;
        //执行一个laydate实例
        laydate.render({
            elem: '#test1' //指定元素
            , type: 'datetime'
            , format: "yyyy-MM-dd HH:mm:ss",
            value: new Date(timestamp)
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#test2' //指定元素
            , type: 'datetime',
            format: 'yyyy-MM-dd HH:mm:ss',
            value: new Date(timestamp1)
        });
    });

    $(function () {

        $("#tabList li").click(function () {
            $(this).addClass("active").siblings().removeClass("active");
            var index = $(this).index();
            $(".btm-content .tab-content").eq(index).addClass("active").siblings().removeClass("active");
        });


        var _liArr = $('#progressBar-ul').children(".p-item")
        var _liWidth = 100 / _liArr.length
        _liArr.each(function () {
            $(this).width(_liWidth + '%')
        })

        // 生产阶段
        var _currenttep = 2
        _liArr.each(function (index) {
            if (index < _currenttep) {
                $(this).addClass('active')
            }
        })
    });


    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var myChart1 = echarts.init(document.getElementById('main1'));
    var myChart2 = echarts.init(document.getElementById('main2'));
    var xData=['09', '10', '11', '12', '01', '02', '03', '04', '05', '06', '07', '08'];
    var yData = [320, 220, 240, 160, 120, 204, 280, 240, 190, 110, 210, 210]
    var yDataMilk = [320, 220, 240, 160, 120, 204, 280, 240, 190, 110, 210, 210]

    var yDataChk = [320, 220, 240, 160, 120, 204, 280, 240, 190, 110, 210, 210]
    // 指定图表的配置项和数据
    var currentSort = '共计总量';
    var timeSort = 2;//月份
    function initEchart() {
        var url = ctx + "front/innerInfo/infoQuery";
        var data = {
            beginTime: $('#startTime').val(),
            endTime: $('#endTime').val(),
            outputType:outputType,
            dataSpan: timeSort
        };
        myPost(url, data, function (data) {
            if (data.code == 0) {
                var xData = [];
                var yData = [];
                var yDataMilk = [];
                var yDataChk = [];
                $(data.rows[0]).each(function (i, e) {
                        xData.push(e.x);
                        yDataChk.push(e.chickenCount);

                });
                $(data.rows[1]).each(function (i, e) {
                    yDataMilk.push(e.milkCount);
                });
                console.log(yDataMilk);
                $(data.rows[2]).each(function (i, e) {
                    yData.push(e.cfCount);
                });
                setBarData(currentSort,'year',xData,yData,yDataMilk,yDataChk);

            }

        }, function () {

        })
    }
    function setBarData(sortIdx,timeSort,xData,yData,yDataMilk,yDataChk) {

        var option01 = {
            legend: {
                data: ['产量'],
                right: '3%',
                selectedMode: false
            },
            title: {
                text: '蔬菜产能趋势图',
                x: 'center',
                textStyle: {
                    fontSize: 26,
                    color: '#2d353e'
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                top: '21%',
                bottom: '7%',
                left: '7%',
                right: '5%'
            },
            xAxis: {
                name: '日',
                nameTextStyle: {
                    color: '#333',
                    fontSize: 18,
                },
                data: xData,
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#b8dbff'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#333',
                        fontSize: 18,
                    }
                }
            },
            yAxis: [{
                name: 'KG',
                nameTextStyle: {
                    color: '#333',
                    fontSize: 18,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#ebeef1'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#b8dbff'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#333',
                        fontSize: 18,
                    }
                }
            }],
            series: [{
                name: '产量',
                type: 'line',
                barWidth: 12,
                symbolSize: 10,
                symbol: 'circle',
                emphasis: {
                    itemStyle: {
                        color: '#ff6d10'
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#ff6d10',
                        barBorderRadius: [0, 0, 0, 0],
                    }
                },
                data: yData
            }]
        };
        var option02 = {
            legend: {
                data: ['产量'],
                right: '3%',
                selectedMode: false
            },
            title: {
                text: '牛奶产能趋势图',
                x: 'center',
                textStyle: {
                    fontSize: 26,
                    color: '#2d353e'
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                top: '21%',
                bottom: '7%',
                left: '7%',
                right: '5%'
            },
            xAxis: {
                name: '日',
                nameTextStyle: {
                    color: '#333',
                    fontSize: 18,
                },
                data: xData,
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#b8dbff'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#333',
                        fontSize: 18,
                    }
                }
            },
            yAxis: [{
                name: 'KG',
                nameTextStyle: {
                    color: '#333',
                    fontSize: 18,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#ebeef1'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#b8dbff'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#333',
                        fontSize: 18,
                    }
                }
            }],
            series: [{
                name: '产量',
                type: 'line',
                barWidth: 12,
                symbolSize: 10,
                symbol: 'circle',
                emphasis: {
                    itemStyle: {
                        color: '#ff6d10'
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#ff6d10',
                        barBorderRadius: [0, 0, 0, 0],
                    }
                },
                data: yDataMilk
            }]
        };
        var option03 = {
            legend: {
                data: ['产量'],
                right: '3%',
                selectedMode: false
            },
            title: {
                text: '鸡肉产能趋势图',
                x: 'center',
                textStyle: {
                    fontSize: 26,
                    color: '#2d353e'
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                top: '21%',
                bottom: '7%',
                left: '7%',
                right: '5%'
            },
            xAxis: {
                name: '日',
                nameTextStyle: {
                    color: '#333',
                    fontSize: 18,
                },
                data: xData,
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#b8dbff'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#333',
                        fontSize: 18,
                    }
                }
            },
            yAxis: [{
                name: 'KG',
                nameTextStyle: {
                    color: '#333',
                    fontSize: 18,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#ebeef1'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#b8dbff'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#333',
                        fontSize: 18,
                    }
                }
            }],
            series: [{
                name: '产量',
                type: 'line',
                barWidth: 12,
                symbolSize: 10,
                symbol: 'circle',
                emphasis: {
                    itemStyle: {
                        color: '#ff6d10'
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#ff6d10',
                        barBorderRadius: [0, 0, 0, 0],
                    }
                },
                data: yDataChk
            }]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option01);
        myChart1.setOption(option02);
        myChart2.setOption(option03);
    }
    setFrontTimeShortcutBtns([[${beginTime}]], [[${endTime}]]);
   /* setBarData(currentSort,'year');*/

    $(".item").click(function () {
            $(".item").removeClass("active");
            $(this).addClass("active");
            if ($(this).attr('id') == "all") {
                return;
            }
            var link = '/front/innerInfo/info?output=' + $(this).attr('id');
            var s = $('#startTime').val();
            var e = $('#endTime').val();

            link += "&beginTime=" + s + "&endTime=" + e + "&dataType=month"
            window.location.href = link;
        }
    );

    $(".main").click(function () {

            $(".main").removeClass("active");
            $(this).addClass("active");
            var type = $(this).attr("id");
            var outputType = $(".active").attr("id");

            location.href = "/front/innerInfo/infoPage?type=" + type + "&outputType=" + outputType;

        }
    );


    $('.thisYear').click(function () {
        $('#startTime').val(new Date().getFullYear() + "-01-01");
        var link = "/front/innerInfo/info";
        var s = $('#startTime').val();
        $('#endTime').val("");
        var e = $('#endTime').val();
        var output = $(".active").attr("id");
        if (output == "all") {
            link += "?beginTime=" + s + "&endTime=" + e + "&dataType=year";
        } else {
            link += "?beginTime=" + s + "&endTime=" + e + "&dataType=year&output=" + output;
        }

        reload(link);
    });

    $('.thisMonth').click(function () {
        var d = new Date();
        var m = d.getMonth() + 1;
        m = m < 10 ? '0' + m : m;
        $('#startTime').val(new Date().getFullYear() + "-" + m + "-01");
        var link = "/front/innerInfo/info";
        var s = $('#startTime').val();
        $('#endTime').val("");
        var e = $('#endTime').val();
        var output = $(".active").attr("id");
        if (output == "all") {
            link += "?beginTime=" + s + "&endTime=" + e + "&dataType=month";
        } else {
            link += "?beginTime=" + s + "&endTime=" + e + "&dataType=month&output=" + output;
        }
        reload(link);
    });
    $('.thisDay').click(function () {
        var link = "/front/innerInfo/info";
        $('#startTime').val(dateFtt(new Date()));
        var s = $('#startTime').val();
        $('#endTime').val("");
        var e = $('#endTime').val();
        var output = $(".active").attr("id");
        if (output == "all") {
            link += "?beginTime=" + s + "&endTime=" + e + "&dataType=day";
        } else {
            link += "?beginTime=" + s + "&endTime=" + e + "&dataType=day&output=" + output;
        }
        reload(link);
    });

    $('.search').click(function () {
        var link = "/front/innerInfo/info";
        var s = $('#startTime').val();
        var e = $('#endTime').val();
        if (!s) {
            $.modal.msgWarning("请填写开始时间")
            return;
        }
        if (!e) {
            $.modal.msgWarning("请填写结束时间")
            return;
        }
        var output = $(".active").attr("id");
        if (output == "all") {
            link += "?beginTime=" + s + "&endTime=" + e + "&dataType=search";
        } else {
            link += "?beginTime=" + s + "&endTime=" + e + "&dataType=search&output=" + output;
        }
        reload(link);
    });
    $('#yearBtn').click(function () {
        timeSort = 1;
        $(this).addClass('active').siblings().removeClass('active')
        initEchart()
        // setBarData(currentSort, 'year')
    })


    $('#monthBtn').click(function () {
        timeSort = 2;
        $(this).addClass('active').siblings().removeClass('active')
        console.log(currentSort)
        initEchart()
        // setBarData(currentSort, 'month')
    })


    $('#dayBtn').click(function () {
        timeSort = 3;
        $(this).addClass('active').siblings().removeClass('active')
        initEchart();
        // setBarData(currentSort, 'day')
    })
    initEchart();

    function reload(link){
        window.location.href = link +"&timeSort="+timeSort;
    }
    setFrontTimeShortcutBtns([[${startTime}]], [[${endTime}]]);
    setTitle("内部信息", false)
</script>
</body>

</html>